<template>
  <nut-popup position="bottom" round closeable :style="{ height: '60%' }" v-model:visible="props.addressShow.WDShow">
    <view class="title">选择网点</view>
    <view class="branch_list">
      <view class="branch_row" v-for="(item,index) in props.desBranchList" :key="index" @click="chooseCompanyList(index)" :class="{ziti_active:chooseList===index}">
        <!-- <view class="ziti_choose"> -->
        <image class="head_img" src="@/assets/images/index/wangdian_img_tuijianwangdian.png" v-if="index == 0"></image>
        <image class="head_img" src="@/assets/images/index/wangdian_img_putongwangdian.png" v-else></image>
        <view class="text">
          <view class="text1">{{ item.COMPANYNAME }}</view>
          <view class="text2">{{ item.LOCAL }}</view>
        </view>
        <view class="icon_group">
          <view @click.stop="toDial(item)">
            <image src="@/assets/images/index/icon_wangdiandianhua.png"></image>
          </view>
          <view @click.stop="toMap(item)" style="margin-left:16rpx">
            <image src="@/assets/images/index/icon_wangdiandaohang.png"></image>
          </view>
        </view>
        <!-- </view> -->
      </view>
    </view>
    <view class="bottomBox_branch_choose">
      <view class="botBtn" @click="chooseBranch">确定</view>
    </view>
    <dialBranch :show="showTelPopup" :tel="branchTel" :title="'拨打电话'" @close="showTelPopup=false" :show-close="true"></dialBranch>
  </nut-popup>
</template>
<script lang="ts" setup>
import { onMounted, ref, reactive, watch } from "vue";
import { getBranchTel } from '@/@api'
import dialBranch from "@/components/dialBranch/index"
import Taro from "@tarojs/taro";
const props = defineProps<{
  addressShow: {
    WDShow:boolean
  };
  desBranchList: any;
  branchNumber: any;
}>();
const emit = defineEmits<{
  (e: "chooseBranch", branchNo: string): void
}>()

//选择网点
const chooseList = ref<number>(0)
const chooseCompanyList = (index:number)=>{
  chooseList.value = index
}
const chooseBranch = ()=>{
  emit('chooseBranch', props.desBranchList[chooseList.value])
}

onMounted(()=>{
  props.desBranchList.forEach((item,index)=>{
    if(item.BRANCHCOMPANYNO === props.branchNumber){
      chooseList.value = index
    }
  })
})

//网点地图
const toMap = (item:any) => {
  Taro.openLocation({
    latitude: Number(item.lat),
    longitude: Number(item.lng),
    scale: 11,
  })
}

//网点电话弹窗
const showTelPopup = ref<boolean>(false)
const branchTel = ref<string>('')
const toDial= async (item) => {
  let res = await getBranchTel([{branchCompanyNo:item.branchno}])
  if(res.code == 200 && res.data && res.data.length){
    branchTel.value = res.data[0].tel
    showTelPopup.value = true
  }
  else{
    Taro.showToast({
      icon: 'none',
      title: '该网点无联系方式'
    })
  }
}
</script>
<style lang="less">
.title {
  font-size: 32rpx;
  line-height: 100rpx;
  font-weight: 600;
  padding-left: 30rpx;
  height: 100rpx;
}
.ziti_active{
  border: 1rpx solid #0966FF;
}
.branch_list {
  //   margin-top: 100rpx;
  width: 100%;
  height: 68%;
  background: rgb(235, 235, 235);
  box-sizing: border-box;
  overflow: auto;
  .branch_row {
    position: relative;
    background-color: #fff;
    width: 100%;
    height: 176rpx;
    padding: 0 30rpx;
    box-sizing: border-box;
    display: flex;
    align-items: center;

    .head_img {
      width: 112rpx;
      height: 112rpx;
      margin-right: 16rpx;
    }
    .text {
      height: 112rpx;
      width: 420rpx;
      display: flex;
      justify-content: center;
      flex-direction: column;
      .text1 {
        font-weight: 700;
        font-family: PingFangSC-Semibold;
        font-size: 28rpx;
        color: #252525;
        display: flex;
        align-items: center;
        .change_branch {
          box-sizing: border-box;
          border: 1rpx solid #c4c4c4;
          width: 84rpx;
          height: 32rpx;
          border-radius: 24rpx;
          margin-left: 16rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          line-height: 40rpx;
          > image {
            width: 20rpx;
            height: 20rpx;
            margin-right: 4rpx;
          }
          > text {
            color: #999;
            font-size: 18rpx;
          }
        }
      }
      .text2 {
        font-family: PingFang SC;
        font-size: 22rpx;
        color: #666666;
        margin-bottom: 16rpx;
        width: 410rpx;
        height: 30rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 28rpx;
        margin-top: 8rpx;
      }
    }
    .icon_group {
      display: flex;
      height: 100%;
      align-items: center;
      margin-left: 10rpx;
      image {
        width: 64rpx;
        height: 64rpx;
      }
    }
  }
}

.listItem {
  background: white;
  border-radius: 16rpx;
  margin-top: 12rpx;
  height: 160rpx;
  box-sizing: border-box;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;
  box-shadow: 0px 0px 16rpx #b9b9b9;

  .itemImg {
    height: 112rpx;
    width: 112rpx;
    background: url("../../../../assets/images/index/服务查询/shixiaojiage_icon_shenghui.png") no-repeat;
    border-radius: 8rpx;
  }

  .itemMsg {
    padding: 0 12rpx;
    flex: 1;

    h5 {
      font-size: 28rpx;
      line-height: 40rpx;
      width: 450rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    p {
      font-size: 22rpx;
      line-height: 28rpx;
      color: #666666;
      width: 450rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
  }
}

.bottomBox_branch_choose {
  background: #fff;
  position: fixed;
  bottom: 0;
  left: 0;
  height: 128rpx;
  width: 750rpx;
  border-top: 1rpx solid #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2500;
  .botBtn {
    width: 700rpx;
    height: 88rpx;
    border-radius: 44rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0966ff;
    color: #fff;
    font-size: 32rpx;
  }
}
</style>
